{% extends "base.html" %}
{% block content %}
    <script src="/static/js/mapping.js" type="text/javascript" charset="utf-8"></script>
    <div class ="map_controls">
        <span>Current Route Length: </span><span id="route_length" >0.000 miles</span>

        <div id="map_canvas" style="padding:0px;margin:0px;width:800px;height:600px;border:2px solid black;"></div>
        {% if username %}
	        <div class="user_controls">
	            <div class="form">
	                <form id="save_map" action="/save/" method="POST">
	                    <label for="map_name">Map Name:</label>
	                    <input type ="text" id="cname" class="required" name="map_name" rows="1" cols="60"  value = "{{currentmap.name}}"/>
	                    <input type="submit" value="Save Map" />                   
	                    <input type="hidden" name ="map_center" id="map_center" value="{{currentmap.center}}"/>
	                    <input type="hidden" name = "map_zoom" id="map_zoom" value="{{currentmap.zoom}}"/>
	                    <input type="hidden" name = "map_type" id="map_type" value="{{currentmap.type}}"/>
	                    <input type="hidden" name = "map_markers" id="map_markers" value="{% for marker in currentmap.markers %}{{marker}};{% endfor %}"/>
	                </form>        
	            </div>
	            {% if currentmap %}
	            <div class="form">
	               <h3>Love this route? Why not share it with others?</h3>
	               <form id="email_map" action="." method="POST">
	                   <label for="email_to">Email Map To:</label>
	                   <input type ="text" id="cemail" class="required" name="email_to" rows="1" cols="100"  value = ""/>
	                   <input type ="hidden" name="map_url" id ="map_url" value="http://maps.google.com/staticmap?center={{currentmap.center}}&zoom={{currentmap.zoom}}&path=rgba:0xff0000ff,weight:5{%for marker in currentmap.markers %}|{{marker}}{% endfor %}&size=640x640&key={{api_key}}&sensor=false"></input>
	                   <input type="submit" value="Email Map" />
	               </form>
	            </div>
	            {% endif %}
	        </div>
        {% endif %}        
    </div>
    {% if username %}
        <div class ="map_list">
            <h3>Your Saved Maps</h3>
                {% for map in maps %}
                    <a href="/../map/{{username}}/{{map.urlname}}/">{{map.name}}</a>
                {% endfor %}
        </div>
    {% endif %}  
    
{% endblock %}
